<template>
  <div class='container'>
    <el-card class="box-card">
      <el-h3>6组_陈子良</el-h3><br><br>
      <div slot="header" v-if="!!subID">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        <!-- 搜索框 -->
        <el-form ref="form" :model="form" label-width="80px">
            <el-row >
              <el-col :span="5">
                <el-form-item label="标签名称">
                  <el-input v-model="requestParam.tagName" ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="状态">
                  <el-select v-model="requestParam.state" placeholder="请选择">
                    <el-option label="已启用" :value="1"></el-option>
                    <el-option label="已禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-form-item >
                  <el-button  @click="empty" :disabled="isLoading">清除</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-form-item>
                  <el-button type="primary" @click="search" class="tag-bgc"
                  :disabled="isLoading">搜索</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="1" :offset="7" >
                <el-form-item>
                  <el-button type="" @click="returnSubject" :plain='ture' class="tag-reclass el-icon-back" v-if= "!!subID">返回学科</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-form-item>
                  <el-button type="primary" @click="hNewTag()"  class="el-icon-edit tag-edbgc">新增标签</el-button>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <!-- 警告框 -->
        <el-alert
          :title= "counts"
          type="info"
          show-icon>
        </el-alert>
      <!-- 数据列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="isLoading">
        <el-table-column
          prop="id"
          label="序号"
          width="200">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="200">
        </el-table-column>
        <el-table-column
          prop="tagName"
          label="标签名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          width="300">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期">
          <template slot-scope="scope">
            <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="200">
          <template slot-scope="scope">
            <span type="success" v-if="scope.row.state=== 1">已启用</span>
            <span type="danger" v-else >已禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="300">
        <template slot-scope="scope">
          <span class="spantags"
            v-text="scope.row.state === 1? '禁用' : '启用'"
            @click="hforbidden(scope.$index, scope.row)">
            </span>
          <span class="spantags"
            :disabled="scope.row.state === 0"
            @click="handleEdit(scope.row)">编辑</span>
          <span class="spantags"
            :disabled="scope.row.state === 0"
            @click="handleDelete(scope.$index, scope.row)">删除</span>
        </template>

        </el-table-column>
      </el-table>
      <!-- fenye -->
      <div class="pages">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(requestParam.page)"
        :total="Number(total)"
        :page-size="Number(requestParam.pagesize)"
        :page-sizes="[10, 20, 50]"
        layout=" prev, pager, next, sizes, jumper"
        :disabled="isLoading"
        >
      </el-pagination>

      </div>
      <!-- 弹层 -->
        <Dialog
        ref="editTag"
        :tag='curRow'
        :subID = this.subID
        @modify="getList"
        @addmodify="getList"
        >
        </Dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, detail, changeState } from '@/api/hmmm/tags'
import Dialog from './../components/tags-add'
export default {
  name: 'tags',
  components: {
    Dialog
  },
  created () {
    if (this.$route.query.id && this.$route.query.name) {
      this.subID = this.$route.query.id
      this.subName = this.$route.query.name
    }
    this.getList()
  },
  data () {
    return {
      curRow: {
        subjectName: null,
        tagName: null,
        id: null,
        subjectID: null
      },
      isLoading: false,
      form: {
        name: '',
        region: '',
        type: [],
        state: ''
      },
      ture: true,
      // 数据项
      channelList: [],
      tableData: [],
      subID: null,
      subName: null,
      state: '',
      counts: '',
      currentPage: 4,
      total: 0,
      id: '', // 序号
      requestParam: {
        page: 1,
        pagesize: 10,
        tagName: null,
        state: null,
        subjectID: null
      }
    }
  },
  methods: {
    search () {
      this.isLoading = true
      this.requestParam.page = 1
      this.getList(this.requestParam)
    },
    // 新增功能
    hNewTag () {
      this.curRow.subjectName = null
      this.curRow.tagName = this.tagName
      this.curRow.id = null
      if (this.subID) {
        this.curRow.subjectID = Number(this.subID)
      } else {
        this.curRow.subjectID = null
      }
      // 2.显示弹层
      this.$refs.editTag.dialogFormV()
    },
    // 编辑功能
    handleEdit (curRow) {
      // 1.获取当前行数据，发给弹框
      // console.log(curRow)

      this.curRow.subjectName = curRow.subjectName
      this.curRow.tagName = curRow.tagName
      this.curRow.subjectID = curRow.subjectID
      this.curRow.id = curRow.id
      // 2.显示弹层
      this.$refs.editTag.dialogFormV()
    },
    // 启动禁用和启用
    async hforbidden (index, row) {
      console.log(index, row.state)
      if (row.state === 1) {
        row.state = 0
      } else if (row.state === 0) {
        row.state = 1
      }
      this.id = row.id
      this.state = row.state
      await changeState({ id: this.id, state: this.state })
      // console.log(result)
      this.getList()
    },
    // 清空功能
    empty () {
      this.requestParam.tagName = null
      this.requestParam.state = null
      // this.$refs.form.resetFields()
      // this.getList()
    },
    // 返回学科
    returnSubject () {
      this.$router.push({ path: '/subjects/list' })
    },
    async getDetail () {
      // 刷新页面
      const result = await detail({ id: this.subID })
      console.log('result', result)
      // this.tableData = result.data
      // this.state = result.data.state
      // this.counts = '共 1 条'
      // this.total = result.data.totals
      // this.id = result.data.id
      // this.form.name = result.data.tagName
    },
    //     // 发送请求获取数据列表
    async getList () {
      // 刷新页面
      this.requestParam.subjectID = this.subID
      const result = await list(this.requestParam)
      console.log(result)
      this.isLoading = false
      this.tableData = result.data.items
      this.state = result.data.items.state
      this.counts = `共 ${result.data.counts} 条`
      this.total = result.data.counts
      this.id = result.data.items.id
      this.form.name = result.data.items.tagName
    },
    // 删除功能
    handleDelete (index, row) {
      // 弹出警告框
      // 传入id 掉接口
      // 根据接口做后续处理
      this.$confirm('此操作将永久删除 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove({ id: row.id }).then(res => {
          this.$message.success('成功删除用户！')
          this.getList()
        }).catch(() => { this.$message.error('删除失败') })
      }).catch(() => { this.$message.error('删除失败') })
    },
    // // 每一页显示的信息
    handleSizeChange (val) {
      // console.log(val)
      this.isLoading = true
      this.requestParam.pagesize = val
      if (this.requestParam.page === 1) {
        this.getList(this.requestParam)
      }
    },
    // 进入到某一页
    handleCurrentChange (val) {
      // console.log(val)
      this.isLoading = true
      this.requestParam.page = val
      this.getList()
    }
  }
}
</script>

<style  lang="scss"  scoped>
  /* 最大的盒子 */
  .container {
    padding: 20px;
  }
  .tag-bgc {
    background: #409EFF;
    color: #ffffff;
  }
  .tag-edbgc{
    background-color: #67c23a;
    color: #ffffff;
  }
  .tag-reclass {
    border:none;
    color: #40b8ff;
  }
  .pagination {
  margin-top: 10px;
}
  .pages {
    margin-top: 10px;
    float: right;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .spantags {
    margin-right: 10px;
    color: #409EFF;
    cursor: pointer;
  }
  .el-button--medium {
    margin-left: -55px;
  }
  .tag-bgc[data-v-01d505a6] {
    margin-left: -20px;
  }
  .el-breadcrumb {
   line-height: 4;
  }
</style>
